<template>
  <div class="">
    <!-- 遍历路由表，生成左侧菜单 -->
    <template v-for="(item, index) in menus">
      <!-- 如果菜单是显式的 -->
      <template v-if="item.display">
        <!-- 一级菜单的情况（或是在递归下，指没有子菜单的情况-即最后一级菜单） -->
        <template v-if="item.children != null && item.children.length == 0">
          <el-menu-item
            :index="item.route"
            :key="index + '' + item.id.toString()"
            :disabled="item.enabled == false"
            v-show="item.display"
          >
            <!-- 设置icon -->
            <template #title>
              <el-icon v-if="item.iconCls">
                <component :is="item.iconCls"></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
          </el-menu-item>
        </template>
        <!-- 一级菜单的情况 end-->
        <!-- 多级菜单的情况 -->
        <template v-else>
          <el-sub-menu
            :index="index + '' + item.id.toString()"
            :key="index + '' + item.id.toString()"
            :disabled="item.enabled == false"
            v-show="item.display"
          >
            <template #title>
              <!-- 设置icon -->
              <el-icon v-if="item.iconCls">
                <component :is="item.iconCls"></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <!--如果还有子菜单，递归调用-->
            <AsideSubMeunView :menus="item.children"></AsideSubMeunView>
          </el-sub-menu>
        </template>
        <!-- 多级菜单 end-->
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults } from 'vue';

/* const props = defineProps({
  menus: {
    type: Array,
    default() {
      return new Array();
    },
  },
}); */

interface Props {
  menus: Record<string, any>[];
}
// const props = withDefaults(defineProps<Props>(), {
//   menus: () => new Array<Record<string, any>>(),
// });
withDefaults(defineProps<Props>(), {
  menus: () => new Array<Record<string, any>>()
});
</script>

<style lang="scss" scoped></style>
